<template>
	<view>
		<!-- 头部标签栏 -->
		<view class="tab">
			<view class="tab-item" v-for="(item, i) in list" :key="i" @click="choose(item)">
				<view class="item" :class="[currentTag.param==item.param?'activited':'']">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 出差申请模块 -->
		<view class="travelView">
			<view class="travelBox" :style="{height:(item.money?'473rpx':'403rpx')}" v-for="(item,i) in currentMes"
				:key="i">
				<view @click="itemClick(item)">
					<view class="boxTop">
						<!-- <view class='boxName'>{{item.businessType}}</view> -->
						<view class='boxName'>{{item.travelType}}</view>
						<image v-if="item.applicationStatus==4 || item.applicationStatus==0" class='boxType' src="../../static/index/daibaoxiao.png">
						</image>
						<image v-if="item.applicationStatus==2" class='boxType'
							src="../../static/index/baoxiaozhong.png"></image>
						<image v-if="item.applicationStatus==21" class='boxType' src="../../static/index/yibohui.png">
						</image>
						<image v-if="item.applicationStatus==20" class='boxType' src="../../static/index/yitongguo.png">
						</image>
						<image v-if="item.applicationStatus==22" class='boxType' src="../../static/index/yichehui.png">
						</image>
					</view>
					<view class="boxMiddle" :style="{height:(item.money?'280rpx':'210rpx')}">
						<view class="middleItem">
							<view class="leftItem">出差时间</view>
							<view class="rightItem">{{item.itineraryStartDate}}至{{item.itineraryEndDate}}</view>
						</view>
						<view class="middleItem">
							<view class="leftItem">出差行程</view>
							<view class="rightItem1">
								{{item.originName}} - {{item.destinationName}}
							</view>
						</view>
						<view class="middleItem">
							<view class="leftItem">出差人员</view>
							<view class="rightItem2">
								{{item.staffName}}
							</view>

						</view>
						<view class="middleItem" v-if="item.money">
							<view class="leftItem">报销金额</view>
							<view class="rightItem">2,780.00元</view>
							<!-- <view class="rightItem">{{item.money}}</view> -->
						</view>
					</view>
					<view class="boxBottom">
						<view class="middleItem">
							<view class="leftItem">{{item.travelApplicationId}}</view>
							<view class="rightItem">{{item.applicationDate}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="load_more">
				<uni-load-more :status="status" />
			</view> -->
		</view>
		<view class='promptBox'>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog class='porPopup' :type="msgType" confirmText="关闭" title="温馨提示"
					content="该报销申请单尚未提交完成，请稍后查看！" @confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		allReimburse,
		waitingReimburse,
		reimburseing,
		// findBankCard
	} from '@/api/reimburseApply.js'
	export default {
		data() {
			return {
				currentTag: {
					title: '全部',
					param: '00'
				},
				list: [{
						title: '全部',
						param: '00'
					}, {
						title: '待报销',
						param: '01'
					}, {
						title: '报销中',
						param: '02'
					}, {
						title: '已通过',
						param: '04'
					}, {
						title: '已驳回',
						param: '03'
					}, {
						title: '已取消',
						param: '05'
				}],
				travelMes: [],
				currentMes: [],
				status: 'more',
				current: 1,
				size:10,
				isLoading: false,
				total:null,
				page:null
			}
		},
		onPullDownRefresh() {
			if (!this.isLoading) {
				if (this.currentTag.param === '00') {
					this.getAllReimburse()
				} else if (this.currentTag.param === '01') {
					this.getWaitReimburse()
				} else {
					this.getReimburseing()
				}
			}
		},
		onReachBottom() {
			if(this.current*this.size>=this.total){
				uni.showToast({
					title:'没有更多数据了...',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.hideLoading()
				}, 500)
			} else {
				uni.showLoading({
					title: '数据加载中...'
				})
				if (this.isLoading) return
				
				this.current++
				
				if (this.currentTag.param === '00') {
					this.getAllReimburse()
				} else if (this.currentTag.param === '01') {
					this.getWaitReimburse()
				} else {
					this.getReimburseing()
				}
				setTimeout(()=>{
					uni.hideLoading()
				}, 500)
			}
		},
		onLoad() {
			this.getAllReimburse()
		},
		components: {},
		watch: {
			currentTag: function(val) {
				// console.log('val.param:', val.param);
				if (val.param === '00') {
					this.getAllReimburse()
				} else if (val.param === '01') {
					this.getWaitReimburse()
				} else {
					this.getReimburseing()
				}
			}
		},
		methods: {
			//点击头部tab栏切换
			choose(arg) {
				this.currentTag = arg
				this.current = 1
				this.currentMes = []
			},
			//点击进入详情
			async itemClick(obj) {
				if (obj.applicationStatus == '04' || obj.applicationStatus == '00') { // 跳转到待报销详情页面
					uni.navigateTo({
						url: "/pages/travelService/expenseWaitingDetails?item=" + encodeURIComponent(JSON
							.stringify(obj)),
					});
				} else {
					uni.navigateTo({
						url: "/pages/travelService/expenseDetails?item=" + encodeURIComponent(JSON.stringify(
							obj)),
					});
				}
			},
			//
			dialogConfirm() {
				console.log(111);
			},
			// 获取所有的报销申请单列表
			getAllReimburse() {
				this.isLoading = true
				uni.showLoading({
					title: '别急，正在拼命加载中...'
				})
				const params = {
					current: this.current,
					size: this.size
				}
				allReimburse(params).then(res => {
					if (res[1].respCode === 'FJKBP0000' && res[1].respCode !== null) {
						this.currentMes =[...this.currentMes, ...res[1].data.records] 
						this.total = res[1].data.total
						this.isLoading = false
						setTimeout(()=>{
							uni.hideLoading()
						}, 500)
					}
				})
			},
			// 获取待报销的申请单列表
			getWaitReimburse() {
				this.isLoading = true
				uni.showLoading({
					title: '别急，正在拼命加载中...'
				})
				const params = {
					current: this.current,
					size: this.size
				}
				waitingReimburse(params).then(res => {
					if (res[1].respCode && res[1].respCode === 'FJKBP0000' && res[1].respCode !== null) {
						this.currentMes =[...this.currentMes, ...res[1].data.records] 
						this.total = res[1].data.total
						this.isLoading = false
						setTimeout(()=>{
							uni.hideLoading()
						}, 500)
					}
				})
			},
			// 获取报销中、已驳回、已通过、已撤回的申请单列表
			getReimburseing() {
				this.isLoading = true
				uni.showLoading({
					title: '别急，正在拼命加载中...'
				})
				const params = {
					current: this.current,
					size: this.size,
					queryFlag: this.currentTag.param
				}
				reimburseing(params).then(res => {
					if (res[1].respCode === 'FJKBP0000' && res[1].respCode !== null) {
						this.currentMes =[...this.currentMes, ...res[1].data.records] 
						this.isLoading = false
						this.total = res[1].data.total
						setTimeout(()=>{
							uni.hideLoading()
						}, 500)
					} 
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tab {
		width: 95%;
		height: 90rpx;
		line-height: 110rpx;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		margin-left: 20rpx;
		font-size: 32rpx;
		background: #fff;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.tab-item {
		display: inline-block;
		margin: 0rpx 20rpx;
		text-align: center;
	}

	.item {
		color: #666;
		height: 85rpx;
	}

	.activited {
		color: #00bb93;
		border-bottom: 4rpx solid #00bb93;
	}

	.travelView {
		min-height: 89vh;
		background: #f7f7f7;
		padding: 30rpx 32rpx 120rpx 32rpx;
	}

	.travelBox {
		box-sizing: border-box;
		width: 686rpx;
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
		box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(0, 0, 0, 0.08),
			0rpx 3rpx 30rpx 0rpx rgba(0, 0, 0, 0.02);

		.boxTop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.boxName {
				font-size: 32rpx;
				font-weight: 500;
			}

			.boxType {
				width: 94rpx;
				height: 40rpx;
			}
		}

		.boxMiddle {
			box-sizing: border-box;
			margin: 0 32rpx;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.middleItem {
			padding-top: 24rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

			.leftItem {
				width: 300rpx;
				color: #666;
			}

			.rightItem {
				color: #333;
			}

			.rightItem1 {
				color: #333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.rightItem2 {
				color: #333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		.boxBottom {
			margin: 0 32rpx;
		}
	}

	.promptBox {
		::v-deep .uni-popup-dialog {
			width: 680rpx;

			.uni-dialog-button:first-child {
				display: none;
			}
		}
	}

	// .endPlace{
	// 	width: 60rpx;
	// 	border: #00bb93 solid 1px;
	// 	white-space: nowrap;
	// 	overflow: hidden;
	// }
</style>
